// 放置自定义指令
// vue插件:一个特殊的对象
// https://v3.cn.vuejs.org/guide/plugins.html#%E7%BC%96%E5%86%99%E6%8F%92%E4%BB%B6
// 1、有一个install方法，它的参数在代码运行的过程中，会自动传入vue实例
// 2、app.use(插件)，它会自动执行 插件的install方法，并自动传入vue实例

import { useIntersectionObserver } from '@vueuse/core'
import defaultImg from '@/assets/images/200.png'
export default {
  install(app) {
    app.directive('imgLazy', {
      // el:指令所绑定的元素，可以用来直接操作DOM
      // binding:一个对象，包含以下 property
      // name:指令名，不包括v-前缀
      // value:指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
      // oldValue:指令绑定的前一个值，仅在update和componentUpdated钩子中可用。无论值是否改变都可用
      // expression:字符串形式的指令表达式。例如：v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
      // arg:传给指令的参数，可选。例如：v-my-directive:foo 中，参数为 "foo"。
      // modifiers:一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。

      mounted(el, binding) {
        // 图片懒加载的逻辑
        // 1、给图片一个默认占位图，初始显示它(优化)
        el.src = defaultImg
        // 2、监听图片el是否处于可见区域，如可见，将图片url数据binding.value赋值给给 el 的src属性来加载图片
        // console.log('imgLazy', el, binding.value)
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          // console.log(el, isIntersecting, stop)
          if (isIntersecting) {
            // 1、停止监听
            stop()
            // 2、设置src
            el.src = binding.value
          }
        }, { threshold: 0.1 })
      }
    })
  }
}
